<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">hello{{msg}}</div>
    <script src="./dist/vue.js"></script>
    <script>
        // 通过umd打包会给window添加一个Vue
        // console.log(Vue);
        // 响应式 vue2  mvvm
       let vm = new Vue({
            el:'#app',
            // data:{},
            // data有几种形式，在这里是一个对象，但是我们在内部实现的时候定义的是一个函数，所以需要进行判断
            data(){
                // console.log(this);
                return{
                    msg:'hello',
                    a:{b:200},
                    list:[1,2,3],
                    arr:[{a:1}]
                }
            }
        })
        // .mount("#app") 这个和el 的作用是一样的
        // console.log("html",vm._data.arr.push({b:0}));//当我们对值进行赋值的时候，还需要进行劫持保证其响应式
        // console.log(vm.msg=100);

        // vue初次渲染： =》 先初始化数据 =》 将模板进行编译 =》 变成render（）=》生成虚拟节点 =》变成真实DOM =》放到页面

        // vue 模板编译有 template render el  注意：el(必须要有)  render() 层级最高，当vue中这三种都有的时候他会先走这个，template
        // 这个层级比render低，render 》 template 》 el

    </script>

</body>
</html>